<template>
  <div>
    <search></search>
    <flexbox :gutter="0">
      <flexbox-item >
        <div class="flex-demo vux-1px" :class="{flexcur:type=='综合'}" @click="type='综合'">综合</div>
      </flexbox-item >
      <flexbox-item >
        <div class="flex-demo vux-1px" :class="{flexcur:type=='销量'}" @click="type='销量'">销量</div>
      </flexbox-item>
      <flexbox-item >
        <div class="flex-demo vux-1px" :class="{flexcur:type=='最新'}" @click="type='最新'">最新</div>
      </flexbox-item>
      <flexbox-item >
        <div class="flex-demo vux-1px" :class="{flexcur:type=='价格'}" @click="type='价格'">价格</div>
      </flexbox-item>
    </flexbox>
    <sgird></sgird>
    <sfooter></sfooter>
  </div>

</template>
<script>
  import search from '../search.vue'
  import {Flexbox, FlexboxItem} from 'vux'
  import sgird from '../sgird.vue'
  export default{
    components: {
      search,
      Flexbox,
      FlexboxItem,
      sgird
    },
    data(){
      return {
        type: "综合"
      }
    },
    methods: {
      ck(){

      }

    }

  }
</script>
<style lang="less">
  @import '~vux/src/styles/1px.less';

  .flex-demo {
    line-height: 50px;
    text-align: center;
    color: #666666;
    background-color: #fff;
    background-clip: padding-box;
  }

  .flexcur {
    color: violet;
  }
</style>
